<!-- 柏林噪声文字 -->
<template>
  <div class="PerlinNoise" :data-text="text">
		{{text}}
	</div>
</template>

<script>
export default {
	props: {
		text: {
			type: String,
			default: 'great components!'
		}
	}
}
</script>

<style leng="less">
.PerlinNoise {
	float: left;
	width: 100%;
	font-size: 90px;
	font-weight: bold;
	font-family: "Playfair Display";
	color: #202020;
	margin-top: 15px;
	margin-bottom: 20px;
	position: relative;
	&::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 2px;
		text-shadow: -2px 0 #49FC00;
		clip: rect(24px, 550px, 90px, 0);
		animation: anim-2 3s infinite linear alternate-reverse;
		width: 100%;
		height: 100%;
		background: #fafdfb;
	}
	&::after {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: -2px;
		text-shadow: -2px 0 #b300fc;
		clip: rect(85px, 550px, 140px, 0);
		animation: anim 2.5s infinite linear alternate-reverse;
		width: 100%;
		height: 100%;
		background: #fafdfb;
	}
}
@keyframes anim {
	0% {
		clip: rect(80px, 9999px, 120px, 0);
	}
	4.16667% {
		clip: rect(10px, 9999px, 18px, 0);
	}
	8.33333% {
		clip: rect(18px, 9999px, 64px, 0);
	}
	12.5% {
		clip: rect(60px, 9999px, 27px, 0);
	}
	16.6667% {
		clip: rect(138px, 9999px, 105px, 0);
	}
	20.8333% {
		clip: rect(85px, 9999px, 69px, 0);
	}
	25% {
		clip: rect(128px, 9999px, 86px, 0);
	}
	29.1667% {
		clip: rect(113px, 9999px, 9px, 0);
	}
	33.3333% {
		clip: rect(113px, 9999px, 14px, 0);
	}
	37.5% {
		clip: rect(118px, 9999px, 108px, 0);
	}
	41.6667% {
		clip: rect(92px, 9999px, 99px, 0);
	}
	45.8333% {
		clip: rect(86px, 9999px, 49px, 0);
	}
	50% {
		clip: rect(148px, 9999px, 130px, 0);
	}
	54.1667% {
		clip: rect(57px, 9999px, 141px, 0);
	}
	58.3333% {
		clip: rect(37px, 9999px, 96px, 0);
	}
	62.5% {
		clip: rect(53px, 9999px, 130px, 0);
	}
	66.6667% {
		clip: rect(142px, 9999px, 90px, 0);
	}
	70.8333% {
		clip: rect(137px, 9999px, 120px, 0);
	}
	75% {
		clip: rect(91px, 9999px, 77px, 0);
	}
	79.1667% {
		clip: rect(95px, 9999px, 41px, 0);
	}
	83.3333% {
		clip: rect(66px, 9999px, 71px, 0);
	}
	87.5% {
		clip: rect(147px, 9999px, 17px, 0);
	}
	91.6667% {
		clip: rect(113px, 9999px, 125px, 0);
	}
	95.8333% {
		clip: rect(55px, 9999px, 48px, 0);
	}
	100% {
		clip: rect(24px, 9999px, 85px, 0);
	}
}
@keyframes anim-2 {
	6.66667% {
		clip: rect(38px, 9999px, 43px, 0);
	}
	10% {
		clip: rect(132px, 9999px, 147px, 0);
	}
	13.3333% {
		clip: rect(12px, 9999px, 23px, 0);
	}
	16.6667% {
		clip: rect(134px, 9999px, 97px, 0);
	}
	20% {
		clip: rect(61px, 9999px, 140px, 0);
	}
	23.3333% {
		clip: rect(15px, 9999px, 98px, 0);
	}
	26.6667% {
		clip: rect(36px, 9999px, 30px, 0);
	}
	30% {
		clip: rect(19px, 9999px, 120px, 0);
	}
	33.3333% {
		clip: rect(106px, 9999px, 57px, 0);
	}
	36.6667% {
		clip: rect(69px, 9999px, 12px, 0);
	}
	40% {
		clip: rect(39px, 9999px, 20px, 0);
	}
	43.3333% {
		clip: rect(139px, 9999px, 127px, 0);
	}
	46.6667% {
		clip: rect(129px, 9999px, 30px, 0);
	}
	50% {
		clip: rect(135px, 9999px, 107px, 0);
	}
	53.3333% {
		clip: rect(16px, 9999px, 11px, 0);
	}
	56.6667% {
		clip: rect(53px, 9999px, 36px, 0);
	}
	60% {
		clip: rect(18px, 9999px, 37px, 0);
	}
	63.3333% {
		clip: rect(82px, 9999px, 123px, 0);
	}
	66.6667% {
		clip: rect(0px, 9999px, 60px, 0);
	}
	70% {
		clip: rect(71px, 9999px, 79px, 0);
	}
	73.3333% {
		clip: rect(92px, 9999px, 133px, 0);
	}
	76.6667% {
		clip: rect(116px, 9999px, 120px, 0);
	}
	80% {
		clip: rect(56px, 9999px, 105px, 0);
	}
	83.3333% {
		clip: rect(33px, 9999px, 47px, 0);
	}
	86.6667% {
		clip: rect(100px, 9999px, 63px, 0);
	}
	90% {
		clip: rect(53px, 9999px, 144px, 0);
	}
	93.3333% {
		clip: rect(131px, 9999px, 117px, 0);
	}
	96.6667% {
		clip: rect(24px, 9999px, 103px, 0);
	}
	100% {
		clip: rect(87px, 9999px, 144px, 0);
	}
}
</style>